<template>
	<div class="abilityConfig" v-if="addVisible">
		<div class="twoStageWindow">
			<div class="twoStageWindowTitle">
				实验室配置 &nbsp; &nbsp;&nbsp;<span style="color:#409EFF">{{labForm.name}}</span>
				<div class="twoStageWindowClose">
					<el-button size="mini" v-on:click="close">取消</el-button>
				</div>
			</div>
			<div class="containercontent" style="margin-top:40px;height:calc(100% - 40px);padding:0  20px;">
				<el-tabs v-model="activeName">
					<el-tab-pane label="能力参数" name="first">
						<div class="seachTip selectw100">
							<div class="inlineblock verticalmiddle infoitem">
								<div class="inlineblock verticalmiddle">
									能力参数
								</div>
								<div class="inlineblock verticalmiddle informationItem">
									<el-input v-model="searchName" size="mini" placeholder="能力参数名称" @keyup.enter.native="readAbility(abilityQuery)"></el-input>
								</div>
							</div>
              <div class="inlineblock verticalmiddle infoitem">
              	<div class="inlineblock verticalmiddle">
              		检测项目
              	</div>
              	<div class="inlineblock verticalmiddle informationItem">
              		<el-select size="mini" v-model="itemValue" @change="readAbility(abilityQuery)" clearable  filterable>
              		  <el-option v-for="item in itemList" :key="item.id" :label="item.name" :value="item.id">
              		  </el-option>
              		</el-select>
              	</div>
              </div>
							<div class="inlineblock basicRightDistanceA searchIcon">
								<el-button size="mini" @click="readAbility(abilityQuery)">搜索</el-button>
							</div>

						</div>
						<el-table :data="detectList" size="mini" class="tableConfig">
							<el-table-column fixed width="38px">
								<template slot-scope="scope">
									<el-checkbox v-model="scope.row.isChoose" @change="(value) =>chooseDetect(value, scope.row)"></el-checkbox>
								</template>
							</el-table-column>
							<el-table-column label="序号" min-width="50px">
								<template slot-scope="scope">
									{{scope.$index+(abilityQuery.page - 1) * abilityQuery.pageCount + 1}}
								</template>
							</el-table-column>
							<el-table-column property="name" label="能力参数" min-width="200px" :show-overflow-tooltip="true">
							</el-table-column>
							<el-table-column property="detectObject" label="检测对象" :formatter="objectFormatter" min-width="100px">
							</el-table-column>
							<el-table-column property="group" label="分组" :formatter="groupFormatter" min-width="150px">
							</el-table-column>
							<el-table-column property="version" label="版本号" min-width="80px">
							</el-table-column>
							<el-table-column property="status" label="状态" min-width="80px" :formatter="formatter">
							</el-table-column>
						</el-table>
						<div class="block changepages">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="abilityQuery.page" :page-sizes="[20,30,40]"
							 :page-size="abilityQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
							</el-pagination>
						</div>
					</el-tab-pane>
					<el-tab-pane label="数据初始化" name="second">
						<div style="width:100%;height:38px;">
							<el-button size="mini" v-on:click="initData" type="primary" style="float:right;">初始化</el-button>
						</div>
						<div style="height:calc(100% - 38px);width:400px;margin:auto;">
							<el-steps :space="100" :active="2" direction="vertical" finish-status="success">
								<el-step title="初始化编码规则" :description="firstTitle" :status="firstStatus"></el-step>
								<el-step title="初始化质控类型以及质控指标" :description="secondTitle" :status="secondStatus"></el-step>
								<el-step title="初始化单位" :description="thirdTitle" :status="thirdStatus"></el-step>
								<el-step title="初始化容器类型" :description="fourthTitle" :status="fourthStatus"></el-step>
								<el-step title="初始化打印模板" :description="fiveTitle" :status="fiveStatus"></el-step>
								<el-step title="初始化仪器类型" :description="sixTitle" :status="sixStatus"></el-step>
								<el-step title="初始化物资" :description="sevenTitle" :status="sevenStatus"></el-step>
							</el-steps>
						</div>

					</el-tab-pane>
					<el-tab-pane label="个性化设置" name="third">
           <div  style = "border: 1px solid #ebeef5;height:60px;width:100%;line-height: 60px;">
              <span style="width:150px;display: inline-block;border-right: 1px solid #ebeef5;text-align: center;float: left;s">审核级别:</span>
              <span style="width:calc(100% - 150px);text-align: center;display: inline-block;float: right;">
                <el-radio-group v-model="levelValue" @change="chooseLevel">
                    <el-radio :label="0">一级</el-radio>
                    <el-radio :label="1">二级</el-radio>
                </el-radio-group>
                <!-- <el-select v-model="levelValue" @change="chooseLevel"  placeholder="请选择">
                  <el-option  v-for="item in leveloptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select> -->
              </span>
            </div>
						<div style="overflow: hidden;clear: both;width: 100%;height:60px;
            border-left: 1px solid #ebeef5;border-right: 1px solid #ebeef5;">
							<input type="file" name="file" id="plFile" @change="upload" style="visibility: hidden;width: 0;height: 0;">
							<el-button size="mini" type="primary" style="float:right;margin-top: 12px;margin-right:12px;" @click="uploadClick" >上传</el-button>
						</div>
						<el-table :data="renwufujian" border style="width: 100%;" height="calc(100% - 130px)" class="tableCon" size="mini" highlight-current-row
						key="renwufujian">
              <el-table-column  label="采样登记表" width="150px">
                <template slot-scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>
							<el-table-column prop="fileName" label="附件名称" min-width="200px">
							</el-table-column>
							<el-table-column label="操作" min-width="90px">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="deleteattachment(scope.row)">删除</el-button>
                  <el-button type="text" size="small" @click="dlownloadattachment(scope.row)">下载</el-button>
                  <el-button type="text" size="small" @click="previewFile(scope.row)">预览</el-button>
                </template>
							</el-table-column>
						</el-table>

          </el-tab-pane>
				</el-tabs>

			</div>

		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import $ from 'jquery'

	export default {
		data() {
			const that = this;
			return {
				activeName: "first",
				detectList: [],
				abilityQuery: {
					page: 1,
					pageCount: 20,
				},
				rowNumber: 0,
				searchName: "",
        itemValue:'',
				firstTitle: "等待...",
				secondTitle: "等待...",
				thirdTitle: "等待...",
				fourthTitle: "等待...",
				fiveTitle:"等待...",
				sixTitle:"等待...",
				sevenTitle:"等待...",
				firstStatus: "wait",
				secondStatus: "wait",
				thirdStatus: "wait",
				fourthStatus: "wait",
				fiveStatus:"wait",
				sixStatus:"wait",
				sevenStatus:"wait",
				renwufujian:[],
				ids:null,
        leveloptions:[{
          value:0,
          label:"一级"
        },{
          value:1,
          label:"二级"
        }],
        levelValue:"",
        itemList:[],
			}
		},
		props: ['addVisible', 'labForm'],
		components: {

		},
		computed: {
			...mapState(["enableStatus", "groupSelect", "objectSelect"]),


		},
		mounted() {
			this.$store.dispatch('dogetDictionary') //接收vuestore里面数据字典数据

		},
		watch: {

			addVisible(val) {
				if (val) {
          this.init()
					this.readAbility(this.abilityQuery)
					this.ids = "collectExcel_" + this.labForm.ename;
				}
			},
			abilityQuery: {
				handler(val, oldVal) {
					this.readAbility(this.abilityQuery)
				},
				deep: true
			},
			activeName(val) {
				if (val == 'second') {

				}else if(val == "third"){
					this.getFilePathByIds();
          this.levelValue = this.labForm.checkNum;
				}
			}
		},
		methods: {
      init(){

        this.$http({
        	method: 'post',
        	apiUrl: 'standard/readAllItem.htm',
        	params: {name:""},
        	isJson: true,
        }).then(res => {
        	if (res.code === 0) {
            this.itemList = res.data;
        	}
        })
      },
			close() {
				this.$emit('update:addVisible', false);
				this.firstTitle = "等待...";
				this.secondTitle = "等待...";
				this.thirdTitle =  "等待...";
				this.fourthTitle =  "等待...";
				this.fiveTitle = "等待...";
				this.sixTitle = "等待...";
				this.sevenTitle = "等待...";
				this.firstStatus =  "wait";
				this.secondStatus =  "wait";
				this.thirdStatus =  "wait";
				this.fourthStatus =  "wait";
				this.fiveStatus = "wait";
				this.sixStatus = "wait";
				this.sevenStatus = "wait";
				this.activeName = "first";
        this.itemValue = ''

			},
			formatter(row, column, cellValue) {
				return this.util.changeStatus({ cellValue: cellValue, list: this.enableStatus })
			},
			// 过滤分组设置
			groupFormatter(row, column, cellValue, index) {
				return this.util.codeChangeName({ cellValue: cellValue, list: this.groupSelect.itemList })
			},
			objectFormatter(row, column, cellValue, index) {
				return this.util.codeChangeName({ cellValue: cellValue, list: this.objectSelect.itemList });
			},
			// 读取能力参数列表
			readAbility(parp) {
				var params = {
					name: this.searchName,
          item:this.itemValue,
					page: parp.page,
					pageCount: parp.pageCount,
					laboratory: this.labForm.id,
				}
				this.$http({
					method: 'post',
					apiUrl: '/lab/getDetectsBylab.htm',
					params: params,
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						for (var i in res.data) {
							if (res.data[i].isChoose == undefined) {
								this.$set(res.data[i], "isChoose", false)
							}
						}
						this.detectList = res.data;

						if (!res.pageinfo) {
							this.rowNumber = 0;
						} else if (res.pageinfo && !res.pageinfo.rowNumber) {
							this.rowNumber = 0;
						} else {
							this.rowNumber = res.pageinfo.rowNumber;
						}
					}
				})
			},
			// 选中能力参数
			chooseDetect(val, row) {
				if (val) {
					this.selectDetect(row, 'choose')
				}
				if (!val) {
					this.selectDetect(row, 'cancel')
				}
			},
			// 能力参数被勾选和取消勾选调用接口
			selectDetect(row, val) {
				if (val == "choose") {
					var url = "/lab/chooseDetect.htm"
					var mes = "已被分配！"
				} else {
					var url = "/lab/cancalDetect.htm"
					var mes = "已取消分配！"
				}
				var params = {
					detectability: row.id,
					laboratory: this.labForm.id,
				}
				this.$http({
					method: 'post',
					apiUrl: url,
					params: params,
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						this.$notify({
							title: "成功",
							message: mes,
							type: "success"
						})

					}
				})
			},
			initData() {
				this.$confirm("是否确定初始化！", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.initCodeRule();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});

			},
			// lab/initCodeRule.htm
			initCodeRule() {
				var params = {
					laboratory: this.labForm.id,
				}
				this.firstTitle = "进行中"
				this.firstStatus = "process";
				this.$http({
					method: 'post',
					apiUrl: '/lab/initCodeRule.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.firstStatus = "success";
						this.firstTitle = "初始化编码规则成功!"
						this.initQc()


					} else {
						this.firstStatus = "error ";
						this.firstTitle = "失败"
					}
				})
			},
			initQc() {
				var params = {
					laboratory: this.labForm.id,
				}
				this.secondTitle = "进行中";
				this.secondStatus = "process";
				this.$http({
					method: 'post',
					apiUrl: '/lab/initQc.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.secondTitle = "初始化质控类型以及质控指标成功";
						this.secondStatus = "success";
						this.initUnit()


					} else {
						this.secondStatus = "error ";
						this.secondTitle = "失败"
					}
				})
			},
			initUnit() {
				var params = {
					laboratory: this.labForm.id,
				}
				this.thirdStatus = "process";
				this.thirdTitle = "进行中";
				this.$http({
					method: 'post',
					apiUrl: '/lab/initUnit.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.thirdStatus = "success";
						this.thirdTitle = "初始化单位成功";
						this.initBottle()


					} else {
						this.thirdStatus = "error ";
						this.thirdTitle = "失败"
					}
				})
			},
			initBottle() {
				var params = {
					laboratory: this.labForm.id,
				}
				this.fourthStatus = "process";
				this.fourthTitle = "进行中";
				this.$http({
					method: 'post',
					apiUrl: '/lab/initBottle.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.fourthStatus = "success";
						this.fourthTitle = "初始化容器类型成功";
						this.initPrint()
					} else {
						this.fourthStatus = "error ";
						this.fourthTitle = "失败"
					}
				})
			},
			initPrint() {
				var params = {
					laboratory: this.labForm.id,
				}
				this.fiveStatus = "process";
				this.fiveTitle = "进行中";
				this.$http({
					method: 'post',
					apiUrl: '/lab/initPrint.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.fiveStatus = "success";
						this.fiveTitle = "初始化打印模板成功";
						this.initEquipType();
					} else {
						this.fiveStatus = "error ";
						this.fiveTitle = "失败"
					}
				})
			},
			initEquipType() {
				var params = {
					laboratory: this.labForm.id,
				}
				this.sixStatus = "process";
				this.sixTitle = "进行中";
				this.$http({
					method: 'post',
					apiUrl: '/lab/initEquipType.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.sixStatus = "success";
						this.sixTitle = "初始化仪器类型";
						this.initMaterial();
					} else {
						this.sixStatus = "error ";
						this.sixTitle = "失败"
					}
				})
			},
			initMaterial(){
				var params = {
					laboratory: this.labForm.id,
				}
				this.sevenStatus = "process";
				this.sevenTitle = "进行中";
				this.$http({
					method: 'post',
					apiUrl: '/lab/initMaterial.htm',
					params: params,
					isJson: false,
				}).then(res => {
					if (res.code === 0) {
						this.sevenStatus = "success";
						this.sevenTitle = "初始化物资";
					} else {
						this.sevenStatus = "error ";
						this.sevenTitle = "失败"
					}
				})
			},

			//
			getFilePathByIds() {
				this.$http({
					method: 'post',
					apiUrl: '/download/getFilePathByIds.htm',
					params: { ids:  this.ids},
					isJson: false,
				}).then(res => {
					if (res.code == 0) {
					this.renwufujian = res.data
					}

				})
			},
			uploadClick() {
				document.getElementById('plFile').click()
			},
			upload(event) {
				var files = document.getElementById('plFile').files;

				var formData = new FormData();
				for(var i of files){
					formData.append('file', i)
				}
				formData.append('ids', this.ids)
				formData.append('type', 5)
				formData.append('taskType', null)
				formData.append('detectability', null)
				formData.append('fileType', 'collectTemplate')
				this.$axios({
					method: 'post',
					url: '/download/fileUpload.htm',
					data: formData,
					headers: { 'Content-Type': 'multipart/form-data',
            'token':sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined,
           }
				}).then(res => {
					var data = res.data
					event.target.value= "";
					if (data.code == 0) {
						this.$notify({
							title: '消息',
							message: '上传成功',
							type: 'success'
						})
						this.getFilePathByIds();
					}else{
						this.$notify({
							title: '消息',
							message: '上传失败',
							type: "warning"
						})
					}

				})
			},
			deleteattachment(row) {
				this.$confirm('是否删除', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						method: 'post',
						apiUrl: '/download/fileDelete.htm',
						params: {
							id: row.id,
						},
						isJson: false,
					}).then(res => {
						if (res.code === 0) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.getFilePathByIds();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 预览
			previewFile(row){
        //     var url = encodeURIComponent("/laboratory/appImage/20040815-111.pdf")
        //     console.log(process.env.baseUrl,url)
        //     window.open('static/pdfjs/web/viewer.html?file=' + url);
        var url = "preview/fileToPdfPreview.htm"
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
        window.open(process.env.baseUrl + url + '?id=' + row.id + "&token=" + token);
			},
			// 下载附件
			dlownloadattachment(row) {
				var url = "/download/fileDownload.htm"
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				window.open(process.env.baseUrl + url + '?id=' + row.id + "&token=" + token);
			},
      chooseLevel(val){
       var params = {
         number:val,
         laboratory:this.labForm.id
       }
        this.$http({
        	method: 'post',
        	apiUrl: '/lab/modCheckNum.htm',
        	params: params,
        	isJson: false,
        }).then(res => {
        	if (res.code === 0) {
            this.$notify({
              type:"success",
              title:"成功",
              message:"修改审核级别成功"
            })
          }
        })

      },
			handleSizeChange: function (val) {
				this.abilityQuery.pageCount = val;
			},
			handleCurrentChange: function (val) {
				this.abilityQuery.page = val;
			},



		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.abilityConfig .el-tabs.el-tabs--top {
		height: 100%;
	}
</style>
<style>
	.abilityConfig .el-tabs .el-tabs__content {
		height: calc(100% - 55px)
	}

	.abilityConfig .el-tabs .el-tabs__content .el-tab-pane {
		height: 100%;
	}

	.abilityConfig .tableConfig {
		height: calc(100% - 86px);
	}

	.abilityConfig .el-table__fixed-body-wrapper,
	.abilityConfig .el-table__body-wrapper {
		height: calc(100% - 36px);
		overflow-y: auto
	}
	.el-step__main .el-step__description{
		font-size: 12px;
		color: #666;
	}
	.el-step__main .el-step__title{
		font-size: 14px;
		color: #333;
	}
	.el-step__head.is-success{
		color:#2bc5d9;
		border-color: #2bc5d9;
	}
	.el-step__head.is-success .el-step__line{
		background-color: #2bc5d9;
	}
	.el-step__title.is-success{
		color:#2bc5d9;
	}

</style>
